<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="商品名称">
        <el-input v-model="pamars.name" placeholder="商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="resetPamars">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addLiveGoods">新增</el-button>
        <el-button :loading="syncLoading" type="success" @click="syncGoods">同步商品</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; " @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="goods_id" label="直播商品id"/>
      <el-table-column prop="name" label="商品名称"/>
      <el-table-column prop="product_id" label="关联商品id"/>
      <el-table-column prop="cover_img_url" label="商品图片">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.cover_imge_url" target="_blank" title="查看最大化图片">
              <img :src="scope.row.cover_imge_url" style="width: 300px;height: 300px"/></a>
              <img slot="reference" :src="scope.row.cover_imge_url" @click="$openImg(scope.row.cover_imge_url)" style="width: 50px;height: 50px; cursor:pointer"/>
          </el-popover>
        </template>
      </el-table-column>
<!--      <el-table-column prop="url" label="商品小程序路径"/>-->
      <el-table-column prop="price_type" label="价格类型">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.price_type == 1" :type="''">一口价</el-tag>
            <el-tag v-else-if="scope.row.price_type == 2" :type="''">价格区间</el-tag>
            <el-tag v-else-if="scope.row.price_type == 3" :type="''">显示折扣价</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="audit_status" label="微信审核状态">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.audit_status === 0" :type="''">未审核</el-tag>
            <el-tag v-else-if="scope.row.audit_status === 1" :type="''">审核中</el-tag>
            <el-tag v-else-if="scope.row.audit_status === 2" :type="''">审核通过</el-tag>
            <el-tag v-else-if="scope.row.audit_status === 3" :type="''">审核失败</el-tag>
          </div>
        </template>
      </el-table-column>
      <!--        1, 2：表示是为api添加商品，否则是直播控制台添加的商品-->
<!--      <el-table-column prop="third_party_tag" label="添加途径">-->
<!--        <template slot-scope="scope">-->
<!--          <div>-->
<!--            <el-tag v-if="scope.row.third_party_tag == 0" :type="''">api添加</el-tag>-->
<!--            <el-tag v-else-if="scope.row.third_party_tag == 2" :type="''">控制台</el-tag>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateLiveGoods(scope.row)">修改</el-button>
          <el-button type="text" class="c-error" size="small" @click="deleteHandle(scope.row.goods_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]" :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>


    <goods-add  ref="dialogAdd" @updataList="getList"></goods-add>
    <goods-update  ref="dialogUpdate" @updataList="getList"></goods-update>
  </div>
</template>

<script>
  import seviceApi from '@/api/wechatLive.js'
  import goodsAdd from './goods_add'
  import goodsUpdate from './goods_update'

  export default {
    data () {
      return {
        pamars: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        dataList: [],
        selectList: [],
        syncLoading: false,
        tableLoading: false,
        dataListLoading: false,
        addVisible: false,
        updateVisible: false
      }
    },
    components: {
      goodsAdd,
      goodsUpdate
    },
    mounted () {
      this.getList()
    },
    methods: {
      resetPamars () {
        this.pamars.name = ''
        this.getList()
      },
      getList () {
        this.tableLoading = true
        seviceApi.getWechatLiveGoodsList(this.pamars).then(res => {
          if (res && res.data.code === 200) {
            this.dataList = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
          this.tableLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pamars.limit = val
        this.getList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pamars.page = val
        this.getList()
      },
      closeDialog () {
        this.form.product = []
        this.closeDialogVisible = false
      },
      addLiveGoods () {
        this.$nextTick(() => {
          this.$refs.dialogAdd.open()
        })
      },
      updateLiveGoods (row) {
        console.log('row', row)
        this.updateVisible = true
        this.$nextTick(() => {
          this.$refs.dialogUpdate.init(row.goods_id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定要删除该条数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          seviceApi.wechatLiveGoodsDelete(id).then(res => {
            if (res && res.data.code === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            }
          })
        }).catch(() => {
        })
      },
      getGoods (p) {
        var ids = []
        p.forEach((item, index) => {
          ids.push(item.id)
        })
        this.form.productId = ids.join(',')
      },
      handleSelectionChange (val) {
        this.selectList = val
      },
      syncGoods () {
        if (this.selectList.length == 0) return this.$message.warning('请至少选择一项')
        this.syncLoading = true
        console.log(this.selectList)
        let ids = []
        for (let i = 0; i < this.selectList.length; i++) {
          ids.push(this.selectList[i].goods_id)
        }
        seviceApi.wechatLiveGoodsSync(ids).then(() => {
          this.syncLoading = false
          this.getList()
        }).then(() => {
          this.syncLoading = false
        })
      }
    }
  }
</script>

<style scoped>
  .c-info {
    color: #999999 !important;
  }

  .table-img {
    width: 60px;
    height: 60px;
  }
</style>
